<template>
	<el-drawer v-model="currentVisible" :class="$style['drawer-device-ransfer']" :title="title" size="800"
		:close-on-click-modal="false" :close-on-press-escape="false">
		<DeviceTransfer v-model:value="deviceAssignData" :keymap="{ label: 'camera_name', value: 'camera_id' }"
			:data="deviceList" :titles="['摄像机列表', '已选中的摄像机']" filterable>
			<template #linakge>
				<el-form :class="$style['form-warpper']">
					<el-form-item>
						<el-switch size="small" v-model="addForm.is_video" :active-value="2" :inactive-value="1"
							active-text="是否同步至联动视频" />
					</el-form-item>
					<el-form-item>
						<el-switch size="small" v-model="addForm.is_record" :active-value="2" :inactive-value="1"
							active-text="是否同步至联动录像" />
					</el-form-item>
					<el-form-item :class="$style['flex-start']">
						<span>录像前时间(秒)</span>
						<el-input type="number" size="small" :disabled="addForm.is_record !== 2"
							v-model="addForm.pre_time" />
					</el-form-item>
					<el-form-item :class="$style['flex-start']">
						<span>录像后时间(秒)</span>
						<el-input type="number" size="small" :disabled="addForm.is_record !== 2"
							v-model="addForm.post_time" />
					</el-form-item>
					<!-- <el-form-item>
						<el-switch size="small" v-model="addForm.is_wall" :active-value="2" :inactive-value="1"
							active-text="是否同步至报警墙" />
					</el-form-item>
					<el-form-item :class="$style['flex-start']">
						<span>选择矩阵</span>
						<el-cascader size="small" ref="cascader" :disabled="addForm.is_wall !== 2"
							v-model="addForm.monitor_id" :options="wallData" :props="defaultProps" clearable />
					</el-form-item> -->
				</el-form>
			</template>
		</DeviceTransfer>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="cancelAssignDevice">取消</el-button>
				<el-button type="primary" @click="onAssignDevice" :disabled="!deviceAssignData.length">确认</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<script>
import { ref, watch, onBeforeUnmount } from 'vue'
import http from '@/utils/http'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import DeviceTransfer from '@/components/DeviceTransfer.vue'
import VueTypes from 'vue-types'

export default {
	name: 'dialog-dahua-video',
	components: {
		DeviceTransfer
	},
	props: {
		value: VueTypes.bool.def(false),
		title: VueTypes.string.def('关联视频')
	},
	emits: ['update:value', 'complete'],
	setup(props, { emit }) {
		const currentVisible = ref(props.value)
		/**
		 * 备选的设备列表
		 * @param {String}  camera_id         - 设备 id
		 * @param {String}  camera_name      - 设备名称
		 */
		const deviceList = ref([])
		/**
		 * 关联的设备数据
		 * @param {String}  camera_id         - 设备 id
		 * @param {String}  camera_name      - 设备名称
		 */
		const deviceAssignData = ref([])
		const is_sync = ref(2)
		const is_wall = ref(2)
		const addForm = ref({
			is_video: 1,
			is_record: 1,
			is_wall: 1,
			pre_time: 10,
			post_time: 10
		})
		const wallData = ref(props.wallData)
		const defaultProps = ref({
			children: 'children',
			label: 'name',
			value: 'id',
			emitPath: false,
			checkStrictly: true
		})
		let deviceID = null

		const open = (id, list) => {
			deviceID = id
			wallData.value = list
			getDeviceList(id)

			currentVisible.value = true
		}

		// 获取设备关联的摄像头
		const getDeviceList = (id) => {
			return http.get('/v1/device/video', { params: { device_id: id } }).then(res => {
				if (res.code == 1) {
					deviceList.value = [...res.data.left, ...res.data.right]
					deviceAssignData.value = res.data.right.map(item => item.camera_id)
				}
			})
		}

		const cancelAssignDevice = () => {
			currentVisible.value = false
			deviceList.value = []
			deviceAssignData.value = []

			emit('update:value', false)
		}

		const onAssignDevice = () => {
			let loading = ElLoading.service({
				lock: true,
				text: 'Loading',
				background: 'rgba(0, 0, 0, 0.7)',
			})

			const postData = {
				device_id: deviceID,
				camera_id: deviceAssignData.value,
				is_video: addForm.value.is_video,
				is_record: addForm.value.is_record,
				is_wall: addForm.value.is_wall,
				pre_time: addForm.value.pre_time,
				post_time: addForm.value.post_time
			}
			http.post('/v1/device/videoAddRelation', postData).then(res => {
				if (res.code == 1) {
					ElMessage.success('更新成功')
					currentVisible.value = false
					deviceList.value = []
					deviceAssignData.value = []

					emit('complete')
				}

				loading.close()
			})
		}

		watch(
			() => props.value,
			visible => {
				currentVisible.value = visible
			}
		)


		onBeforeUnmount(() => {
			currentVisible.value = false
		})

		return {
			currentVisible,
			deviceList,
			deviceAssignData,
			cancelAssignDevice,
			onAssignDevice,
			open,
			is_sync,
			addForm,
			defaultProps,
			wallData
		}
	}
}
</script>

<style lang="scss" module>
.drawer-device-ransfer {
	& [class~="el-drawer__header"] {
		margin-bottom: 0;
	}

	& [class~="el-drawer__body"] {
		display: flex;
		flex-direction: column;
	}
}

.flex-start {
	& [class~='el-form-item__content'] {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	& [class~='el-input'] {
		width: 50%;
		margin-left: 10px;
	}

	& [class~='el-cascader'] {
		width: 70%;
		margin-left: 10px;

		& [class~='el-input'] {
			width: 80%;
			margin-left: 10px
		}

	}
}

.form-warpper {
	& [class~='el-form-item'] {
		margin-bottom: 5px;
	}
}
</style>
